<template>
    <div class="btns">
        <ul>
            <li class="btnOne" v-for = "(item, index) of btnList" :key="index">

                <div class="btnName lf" ><span    class="iconfont tubiao" v-html="item.level" style="float:left"></span> {{item.name}}</div>
               
            </li>
           
        </ul>
    </div>
</template>
<script>
export default {
    name: 'CommonControlBtn',
    data(){
        return{
            isOnOff : false,
            isIndex : -1,
            btnList: [
                {name:"气候适宜指数", backG : 'one', seen: false, level: '&#xe6d6;'},
                {name:'舒适度指数', backG : 'two', seen: false, level: '&#xe600;'},
                {name:'度假指数', backG : 'three', seen: false, level: '&#xe62d;'},
                {name:'风寒指数', backG : 'four', seen: false, level: '&#xe67d;'},
                {name:'温湿指数', backG : 'two', seen: false, level: '&#xe62e;'}
                
            ]
        }
    }
   
}
</script>
<style lang="stylus" scoped> 
    .btns
        position:absolute
        z-index:1
        left:4.26rem
        top:7.96vh
        font-size:.14rem
        color:white
        ul
            li
                margin-bottom:7px
                height: 25px
                .btnName
                    width:100px
                    text-align :center
                    line-height:19px
                    .tubiao
                        width: 25px
                        height: 25px
                        font-size:25px
                .btnName:first-child
                    width:120px
                .one
                    background: #0CDE4E
                .two
                    background: #32F3A9
                .three
                    background: #63B5E6
                .four
                    background: #6AA6C9
                .five
                    background: #737373
        .btn
            width: 30px
            height: 14px
            background: #59E1FE
            margin-left:10px
            margin-top:2px
            border-top-left-radius:10px    
            border-top-right-radius:10px 
            border-bottom-left-radius:10px
            border-bottom-right-radius:10px
            overflow :hidden
            .onOff
                width:12px
                height: 12px
                float: right
                background: #fff
                margin-top: 1px
                margin-left: 1px
                margin-right: 1px
                border-radius: 50%
        .onOffActive
            background:#737373
            .onOffG
                float:left
</style>


